<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写面经</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1992971_c1dhs6uqoej.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height: 100%;
        }
        body{
            background-color: #eee;
        }
        html{
            font-size: 14px;
        }
        ul,li{
            list-style: none;
        }
        h1,h2,h3,h4,h5,h6{
            font-size: 14px;
            font-weight: normal;
        }
        i,em{
            font-style: normal;
        }
        b,strong{
            font-weight: normal;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        input{
            outline: none;
        }
        /* 写面经 */
        #writeExp{
            width: 100%;
            overflow: hidden;
        }
        .writeExp-con{
            margin: 40px;
            background-color: #fff;
            padding: 20px;
        }
        .header{
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
            font-size: 18px;
        }
        .header .iconfont{
            color: teal;
            font-size: 20px;
        }
        .header i{
            font-weight: bold;
            color:#333;
        }
        .con{
            padding: 20px;
            overflow: hidden;
        }
        .con h2,.con h3{
            font-size: 16px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
        }
        .con input{
            padding: 2px 5px;
        }
        .txt{
            width: 94%;
            resize: none;
            outline: none;
            padding: 3%;
            float: left;
            border: none;
        }
        .publish{
            margin-top: 20px;
            display: block;
            border: none;
            outline: none;
            padding: 10px 20px;
            border-radius: 5px;
            color: #fff;
            background-color: #bbb;
            float: right;
        }
        .publish:hover{
            background-color: #25bb9b;
        }
    </style>
</head>
<body>
    <!-- 写面经 -->
    <div id="writeExp">
        <div class="writeExp-con">
            <div class="header">
                <span class="iconfont icon-jia3"></span>
                <i>分享我的面经</i>
            </div>
            <div class="con">
                 <lable>公司：<input type="text" class="company" placeholder="请输入公司名称"></lable>
                 <label>职位：<input type="text" class="post" placeholder="请输入面试岗位"></label>
                 <label>题目：<input type="text" class="title" placeholder="请输入你的标题"></label>
                <textarea class="txt" placeholder="在这里添加你的面试经验\(^o^)/~"></textarea>
                <button class="publish">发布</button>
            </div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        // textarea 高度由内容撑开
        $(".txt").each(function () {
            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
        }).on('input', function () {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });

        // 点击提交
        $(".publish").click(function(){
            let com = $(".company").val()
            let post = $(".post").val()
            let title = $(".title").val()
            let txt = $(".txt").val()
            let time = parseDate()
            if(title.length && txt.length >= 30){
                $.ajax({
                    url:"http://127.0.0.1:84/writeExp",
                    data:{
                        userName:window.location.href.split("?")[1].split("=")[1],
                        com:com,
                        post:post,
                        title:title,
                        txt:txt,
                        time:time,
                    },
                    success(data){
                        alert(data + ",请到个人中心>我的面经中查看")
                        window.location.href = `http://127.0.0.1:84/me.html?userName=${window.location.href.split("?")[1].split("=")[1]}`
                    }
                })
            }
            else{
                alert("请检查题目和内容，内容不能少于30字")
            }
        })

        // 返回字符串形式的日期
        function parseDate(date){
            var date = date || new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
            var result = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
            return result
        }
</script>
</body>
</html>